<template name="page_message">
  <view class="page_message">
    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions"
                @readAll="btn_readAll()" />

    <view class="listContainer"
          v-if="list.length > 0"
          :style="listContainerHeight">
      <scroll-view-y @refresh="refresh()"
                     :pageNo="searchObject.pageNo"
                     :pageSize="searchObject.pageSize"
                     :total="total"
                     :height="25"
                     @getMore="getMore()">
        <template slot="scrollView_content">
          <!-- 单条数据 -->
          <view class="bar"
                v-for="(item, i) in list"
                :key="i"
                @click="toInfo(item)">
            <view class="left">
              <image class="icon"
                     mode="widthFix"
                     :src="baseImgUrl + '/message/icon.png'" />
              <!-- 是否已读标点 -->
              <view class="dot_unRead"
                    v-if="item.isRead === 0"></view>
            </view>

            <view class="right">
              <view class="important">
                <view class="title">{{ item.noticeTitle }}</view>
                <view class="time">{{ item.createTime.substring(0, 10) }}</view>
              </view>
              <view class="content"
                    v-html="item.noticeContent">
              </view>
            </view>
          </view>
        </template>
      </scroll-view-y>
    </view>
    <no-data v-else
             text="暂无消息通知"></no-data>
  </view>
</template>
<script>
import scrollViewY from "@/components/scrollViewY/index";
import { baseImgUrl } from "@/config.js";
export default {
  components: { scrollViewY },
  data () {
    return {
      baseImgUrl: baseImgUrl,
      // 消息导航栏参数
      navOptions: {
        center: {
          title: "消息",
        },
        right: {
          // icon: "delete", // 右侧图标
          desc: "全部已读", // 右侧图标的文字描述
          style:
            "font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;line-height: 36rpx;;", // 右侧文字描述的样式
          methodsName: "readAll", // 下发点击事件名
        },
      },
      list: [],
      // 列表数据
      searchObject: {
        // 搜索条件
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      dataStatus: "刷新", // 用于解决闪烁问题
      loading: false,
    };
  },
  //! 提供给组件 下拉刷新上拉加载的 数据获取的方法
  provide () {
    return {
      getData: this.getList,
    };
  },
  onShow: function () {
    this.getList();
  },
  computed: {
    // 底部导航栏高度 单位px
    navigationBarHeight () {
      return (
        uni.getStorageSync("menuInfo").navigationBarHeight ||
        uni.getStorageSync("menuInfo").statusBarHeight / 2
      );
    },
    // 高度 =  100vh - 导航栏高度 - 状态栏高度 -  菜单高度
    listContainerHeight () {
      // 顶部状态栏 + 标题栏的高度 单位px
      const actionBarHeight = uni.getStorageSync("menuInfo").actionBarHeight;
      // 底部导航栏的高度
      const navigationBarHeight = this.navigationBarHeight;
      if (actionBarHeight) {
        return (
          "height:calc(100vh - " +
          (actionBarHeight + navigationBarHeight + 50) +
          "px);"
        );
      } else {
        return "height:calc(100vh - 80rpx - 100rpx);";
      }
    },
  },
  created () {
    this.getList();
  },
  methods: {
    // 跳转自详情
    toInfo (item) {
      uni.navigateTo({
        url: "/pages/message/info?noticeId=" + item.noticeId,
        success: () => {
          this.getList();
        },
      });
    },

    // 获取信息列表
    getList () {
      return new Promise((resolve, reject) => {
        if (this.loading) reject()

        this.loading = true
        uni.showLoading({
          title: '正在加载请稍后',
          mask: true
        });

        this.$store.dispatch("message_list", this.searchObject)
          .then((res) => {
            if (res && res.code === 200) {
              this.total = res.data.total;
              this.dataStatus === "刷新"
                ? (this.list = res.data.items)
                : this.list.push(...res.data.items);
              resolve(res.data);
            }
          })
          .finally(() => {
            let timer = setTimeout(() => {
              this.loading = false
              uni.hideLoading();
              clearTimeout(timer)
            }, 3000);
          })
      });
    },

    // 全部已读
    btn_readAll () {
      uni.showModal({
        title: "提示",
        content: "确定要全部已读？",
        cancelText: "取消",
        confirmText: "确认",
        success: (res) => {
          if (res.confirm) {
            this.$store
              .dispatch("message_readAll", { self: true })
              .then((res) => {
                if (res && res.code === 200) {
                  // 清空消息数量
                  // this.$store.state.login.WS.messageCounnt = 0
                  this.list = [];
                  this.getList();
                }
              });
          }
        },
      });
    },
    // 刷新数据
    refresh () {
      this.dataStatus = "刷新";
      this.searchObject.pageNo = 1;
    },
    // 上拉加载
    getMore () {
      if (this.searchObject.pageNo * this.searchObject.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.searchObject.pageNo++;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.icon {
  width: 80rpx;
}
.content {
  width: 100%;
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}
.left {
  position: relative;
  .dot_unRead {
    position: absolute;
    width: 10rpx;
    height: 10rpx;
    background: #ed1322;
    top: 0;
    left: 60rpx;
    border-radius: 50%;
  }
}

.page_message {
  overflow: hidden;
}
.listContainer {
  overflow: auto;
  margin-top: 25rpx;
}
.bar {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 45rpx;
  margin-left: 20rpx;
  &:active {
    background-color: #f8f8f8;
  }
}

.important {
  color: #333;
  font-size: 28rpx;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.time {
  color: #c1c1c1;
  font-size: 24rpx;
  text-align: right;
  width: 8em;
}

.title {
  min-width: 12em;
  width: calc(100% - 6em - 7em);
}
.right {
  width: calc(100% - 60rpx - 24rpx);
  margin-left: 24rpx;
  * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
